<template>
  <div>
    <div  class="min_wrapper_1200">
      <div style="width: 1240px; height: 100%;
    margin: 40px auto;
   " class="row-between-wrapper">
        <div class="" style="display: flex;justify-content: space-between; ">
          <div @click="logo"><img style="width: 80px;height: 40px;" src="https://www.pacificshopmall.xyz/uploads/def/20231024/2a942f4b8c56e03dc656595e940ccd3a.jpg" alt=""></div>

          <div class="search acea-row">
            <div class="text acea-row row-middle"><span class="iconfont icon-xiazai5"></span>
              <input v-if="types == 'one'|| types == undefined"  style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="Search for brands/products/suppliers"  />
              <input v-if="types == 'five'"  style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="ソース/商品/仕入先/購買"  />
              <input v-if="types == 'two'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="找货源/商品/供应商/求购"  />
              <input v-if="types == 'three'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="找貨源/商品/供應商/求購"  />
              <input v-if="types == 'four'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="ค้นหาแหล่ง / สินค้า / ผู้จำหน่าย / ซื้อ"  />
              <input v-if="types == 'six'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="Tìm nguồn/Sản phẩm/Nhà cung cấp/Yêu cầu mua"  />
              <input v-if="types == 'seven'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="Mencari sumber/produk/penyedia/permintaan pembelian"  />
              <input v-if="types == 'eight'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="स्रोत/उत्पादक/प्रदान करनेवाले/खरीदी निवेदनों के लिए खोज रहे हैं"  />
              <input v-if="types == 'nine'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="Kaynaklar/ürünler/teminatçılar/alış istekleri arıyor"  />
              <input v-if="types == 'ten'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder=" أبحث عن مصادر / السلع / الموردين / شراء"  />
              <input v-if="types == 'eleven'" style="width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap" @click="searchBox" v-model="search"  @input="handleChange" @keydown.enter.stop="submit" type="text" placeholder="공급원 / 상품 / 공급업체 / 구매 요청"  />
              <div v-if="SearchShow == true" class="inputSearch">
                  <div style="margin: 0 6px; padding: 10px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 500;
    font-size: 12px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    color: #000;
    "
    :style="brandList.length == 0?'border-bottom: none;':'border-bottom: 1px solid #eeeeee;'"
    @click="StoreSearch()"
    >
                     <i  class="el-icon-s-shop"></i>
                     <span>{{search + $t('page.index.Relatedstoresfound')}}</span>
                  </div>
                  <div  v-for="(item, index) in brandList" :key="index"
                    @click="brand(item)"
                    style="margin: 0 6px; padding: 10px;
                    border-bottom: 1px solid var(--color-border);
                    font-weight: 500;
                    font-size: 12px;
                    overflow-x: hidden;
                    text-overflow: ellipsis;
                    color: #000;
                    "
                    :style="index == 4?'border-bottom: none;':'border-bottom: 1px solid #eeeeee;'"
                  >
                     <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.store_name}}</span>
                  </div>
               </div>
            </div>

            <div class="bnt" @click="submit">{{$t('page.goodsSearch.search')}}</div>
            <div class="search-hot">
              <span v-for="(item, index) in hotSearchList" :key="index"
                @click="(search = item.keyword) && submit()">{{ item.keyword }}</span>
            </div>
          </div>

          <div class="user acea-row row-middle">
              <div class="">
                <i class="el-icon-user" style="font-size: 22px; color: #646464;"></i>
              </div>
              <nuxt-link :to="{path:'/user',query:{type:0}}" class="item acea-row row-middle" v-if="$auth.loggedIn">
                <!-- <div class="pictrue">
                  <img v-if="$auth.user.avatar" :src="$auth.user.avatar">
                  <img v-else src="~assets/images/f.png"/>
                  </div> -->
                <p class="line1" style="max-width: 135px;margin-left: 10px;">{{$auth.user.nickname}}</p>
                <img src="~/assets/images/king.png" class="king"
                  v-if="$auth.user.is_open_member && $auth.user.is_money_level">
              </nuxt-link>
              <div @click="showLogin" class="item" v-else style="margin-left: 5px; font-size: 12px; color: #646464;">{{$t('page.user.login')}}</div>
              <div>
                <a href="https://chat.ichatlink.net/widget/standalone.html?eid=c30a6d74560ff67b48209db36075c00e&language=en">
                  <i class="el-icon-headset"style="font-size: 22px; color: #646464; margin-left: 20px;"></i>
                </a>
              </div>
              <el-badge :value="messageNum" class="item" :max="9" :hidden="messageNum===0">
                <a @click="chatVisible = true" class="item el-icon-chat-line-round"style="font-size: 22px; color: #646464; margin-left: 25px;"></a>
              </el-badge>
             <!-- <nuxt-link style="width: 55px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-if="$auth.loggedIn" :to="{path:'/user/order_list',query:{type:1}}" class="item">{{$t('page.user.myOrder')}}
              </nuxt-link> -->
              <!-- <nuxt-link style="width: 55px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-if="$auth.loggedIn"  :to="{path:'/user/balance',query:{type:3}}" class="item">{{$t('page.user.mybalance')}}</nuxt-link> -->
              <template v-if="$auth.loggedIn">
                <!-- v-if="!$auth.user.merchant_info"   v-else  -->
                <nuxt-link v-if="!$auth.user.merchant_info" style="margin-left:10px;"  :to="{path:'/merchant_settled'}" class="item">{{$t('page.store.title1')}}</nuxt-link>
                <template  v-else>
                  <nuxt-link style="margin-left:10px;"  :to="{path:'/Merchantbackend'}" class="item">{{$t('page.store.title3')}}</nuxt-link>
                  <!-- <a style="margin-left:10px;" href="/user/merchant?type=11" target="_blank" class="item">{{$t('page.store.title3')}}</a> -->
                  <!-- <el-badge :value="messageNum" class="item" :max="9" :hidden="messageNum===0">
                    <a @click="chatVisible = true" class="item">{{$t("page.chat.customer")}}</a>
                  </el-badge> -->
                </template>
              </template>
              <!-- <nuxt-link :to="{path:'/news_list'}" class="item">{{$t('page.user.information')}}</nuxt-link> -->
              <div class="lang">
                <div style="display: flex;" class="lang-default" @click="langTap">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'one' || types == undefined" src="../utils/img/english.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'two'" src="../utils/img/nationalFlag.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'three'" src="../utils/img/flagfour.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'four'" src="../utils/img/TWO.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'five'" src="../utils/img/TWO.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'six'" src="../utils/img/flagheight.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'seven'" src="../utils/img/flagten.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'eight'" src="../utils/img/flagseven.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'nine'" src="../utils/img/flagsix.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'ten'" src="../utils/img/flagnine.png" alt="">
                  <img style="width: 18px; margin-right: 10px;" v-if="types == 'eleven'" src="../utils/img/flagfive.png" alt="">
                  {{$t('language')}}
                </div>
                <div class="select" v-if="langSelect === true">
                  <div class="overall" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%; margin-right: 10px;" src="../utils/img/english.png" alt="">
                     <span @click="onLangTap('en','one')">English</span>
                  </div>
                  <!-- <span @click="onLangTap('fr')">Français</span> -->
            <!-- <span @click="onLangTap('lao')">ພາສາລາວ</span> -->
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/nationalFlag.png" alt="">
                     <span @click="onLangTap('zh-Hans','two')">
                      中文简体
                      </span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagfour.png" alt="">
                     <span @click="onLangTap('zh-Hant','three')">中文繁體</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/TWO.png" alt="">
                     <span @click="onLangTap('th','four')">ภาษาไทย</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                     <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagThree.png" alt="">
                     <span @click="onLangTap('ja','five')">日本語</span>
                  </div>
                   <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                      <img style="width: 18px; height: 18px; border-radius: 50%; margin-right: 10px;" src="../utils/img/flagheight.png" alt="">
                      <span @click="onLangTap('vi','six')">Ngônngữ Việt</span>
                   </div>
                   <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                      <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagten.png" alt="">
                      <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" @click="onLangTap('id','seven')">Bahasa Indonesia </span>
                   </div>

                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/th.jpg" alt="">
                    <span @click="onLangTap('hi','eight')">हिंदी भाषा</span>
                  </div>

                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/tr.png" alt="">
                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" @click="onLangTap('tr','nine')">Türkçe</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagnine.png" alt="">
                    <span @click="onLangTap('ar','ten')">بالعربيةة</span>
                  </div>
                  <div class="" style="display: flex; align-items: center; margin-left: 10px;">
                    <img style="width: 18px; height: 18px; border-radius: 50%;margin-right: 10px;" src="../utils/img/flagfive.png" alt="">
                    <span @click="onLangTap('ko','eleven')">한국어</span>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
     <!-- <div style="height: 50px;"></div> -->
   <ChatItem
      v-if="$auth.loggedIn && $auth.user.merchant_info && $auth.user.service"
      :dialogVisible="chatVisible"
      :title="$auth.user.service.nickname"
      :role="2"
      :mer_id="$auth.user.service.mer_id"
      :userId="$auth.user.uid"
      @close="chatVisible = false" />
  </div>
</template>
<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------
  import ChatItem from "@/components/chat";
  export default {
    name: "headers",
    components: { ChatItem },
    mixins: [],
    data() {
      return {
        brandList:[],
        inputValue:'',
        SearchShow:false,
        chatVisible:false,
        headerList: [],
        langSelect: false,
        search: "",
        userInfo: {},
        showCode: false,
        hotSearchList: [],
        dialogVisible: false,
        current: 1,
        account: "",
        password: "",
        captcha: "",
        keyCode: "",
        info: '',
        isShow: true,
        appidNum: '',
        hosts: '',
        codes: '',
        fromPath: '',
        disabled: false,
        merchant_info:'',
        messageNum:0,
        types:'',
      }
    },
    watch: {
      $route: {
        handler: function(newVal, oldVal) {
          this.search = newVal.query.title ? newVal.query.title : '';
        },
        // 深度观察监听
        deep: true
      }
    },
    head() {
      return {
        title: this.$store.state.titleCon
      }
    },
    beforeMount() {
      if (this.$auth.loggedIn) {
        this.gainCount();
        if(this.$auth.user.merchant_info){
          this.getMessageNum()
        }
      }
      this.getHotSearchList();
      this.merchant_info = this.$store.state.merchant_info
    },
    mounted() {
      window.addEventListener('keydown', this.keyDown);
      document.addEventListener('click', this.bodyCloseMenus)
      this.hosts = location.origin + location.pathname;
      this.fromPath = this.$cookies.get("fromPath");
      this.types = this.$cookies.get("type");
      console.log('this.types',this.types)
      if (this.codes) {
        this.loginCode();
      }
    },
    beforeDestroy() {
      document.removeEventListener('click', this.bodyCloseMenus)
    },
    destroyed() {
      window.removeEventListener('keydown', this.keyDown, false);
    },
    methods: {
      brand(item){
        console.log('item',item.store_name)
        this.SearchShow = false
         this.$router.push({
           path: '/goods_search',
           query: {
             title: item.store_name,
           }
         });
      },
      handleChange(value){
        let _this = this;
        console.log('value',value.target.value)
        if(value.target.value !== ''){
          this.SearchShow = true
           let currentPage = {
             'keyword':value.target.value,
             'limit':5
           }
           _this.$axios.get('/api/product/spu/lst', {
             params: currentPage
           }).then(function (res) {
             _this.brandList = res.data.list
           }).catch(function (err) {
             _this.$message.error(err);
           })
        }else{
          _this.brandList = []
          this.SearchShow = false
          console.log('_this.brandList',_this.brandList)
        }
      },
      searchBox(){
      },
      StoreSearch(){
        this.SearchShow = false
        this.$router.push({
          path: '/goods_searchShop',
          query: {
            title: this.search,
            type:'shop',
          },
        });
         // location.reload()
      },
      logo(){
        this.$router.push({
          path: '/',
        });
      },
      getMessageNum(){
        this.$axios.get('/api/user/member/djlist').then(res=>{
          this.messageNum = res.data.card_num
        })
      },
      getHotSearchList() {
        this.$axios.get("/api/common/hot_keyword").then(res => {
          this.hotSearchList = res.data;
        })
      },
      AddFavorite() {
        let url = window.location;
        let title = document.title;
        let ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf("360se") > -1) {
          this.$message(this.$t('message.tips.browser'));
        } else if (ua.indexOf("msie 8") > -1) {
          window.external.AddToFavoritesBar(url, title); //IE8
        } else if (document.all) {
          try {
            window.external.addFavorite(url, title);
          } catch (e) {
            this.$message(this.$t('message.tips.nubrowser'));
          }
        } else if (window.sidebar) {

          this.$message(this.$t('message.tips.nubrowser'));
        } else {
          this.$message(this.$t('message.tips.nubrowser'));
        }
      },
      gainCount: function() {
        let that = this;
        that.$axios.get('/api/user/cart/count').then(res => {
          that.$store.commit('cartNum', res.data[0].count || 0);
        });
      },
      submit() {
        if (this.$route.path == '/goods_search') {
          this.$router.push({
            path: '/goods_search',
            query: {
              title: this.search ? this.search.trim() : '',
              inshow:1
            }
          });
          this.search = '';
        } else {
          this.$router.push({
            path: '/goods_search',
            query: {
              title: this.search ? this.search.trim() : ''
            }
          });
          this.search = '';
        }
      },
      handleClose() {
        this.dialogVisible = false
      },
      showLogin() {
        console.log('登录')
        this.$router.push({
          path: '/classificationOne',
        });
        // this.$store.commit("isLogin", true);
      },
      keyDown(e) {
        // this.submit()
      },
      goHome() {
        this.$router.push({
          path: '/'
        });
      },
      langTap() {
        if (this.langSelect == true) {
          this.langSelect = false
        } else {
          this.langSelect = true
        }
      },
      onLangTap(e,types) {
        //写入缓存 $cookies
        //localStorage.setItem("locale", e);
        console.log('types',types)
        this.$cookies.set("type", types)
        this.$cookies.set("locale", e);
        //刷新页面
        location.reload();
      },

      bodyCloseMenus(e) {
        if (e.target.className != 'lang-default') {
          this.langSelect = false
        }
      },
      async loginCode() {
        let that = this;
        await that.$auth.loginWith('local3', {
          params: {
            code: this.codes
          }
        }).then(() => {
          that.isShow = false;
          if (this.fromPath) {
            let path = this.fromPath.split(that.$router.history.base);
            let fromPath = path.join('');
            that.$router.push(fromPath);
          } else {
            that.$router.push('/');
          }
          that.$cookies.remove("fromPath");
        }).catch(err => {
          // that.$layer.msg('登录失败');
        })
      },
      async code() {
        let that = this;
        if (!that.account) return that.$message.error(this.$t('message.login.emptyPhone'));
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$message.error(this.$t('message.login.pleaseetphonenumber'));
        await this.$axios.post("/api/auth/verify", {
          phone: that.account,
          type: 'mobile',
          key: that.keyCode
        }).then(res => {
          that.$message.success(res.message);
          that.sendCode();
        }).catch(err => {
          that.$message.error(err);
        });
      },
    }
  }
</script>
<style scoped lang="scss">
  .inputSearch{
    position: absolute;
    top: 46px;
    left: 0px;
    width: 121%;
    background-color: #fff;
    padding: 5px 10px 10px 10px;
    overflow-y: auto;
    z-index:99;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .inputSearch::-webkit-scrollbar{
          width: 6px;
          height: 6px;
  }
  .inputSearch::-webkit-scrollbar-thumb{
         border-radius: 2px;
         background:#c7c7c7;
  }
  .inputSearch::-webkit-scrollbar-track{
         border-radius: 2px;
         background: #flflfl;
  }
  .lang {
    position: relative;
    width: 160px;
    display: block;
    // text-align: center;
    margin-left:20px;
    .select {
      position: absolute;
      top: 20px;
      left: 0px;
      width: 100%;
      background-color: #fff;
      padding: 5px 10px 10px 10px;
      height: 300px;
      overflow-y: auto;
	    z-index:99;
          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
          span {
            display: block;
            line-height: 36px;
            text-align: center;
            color: #000;
            z-index: 999;
            &:hover {
              color: #f89900;
            }
          }
      // .overall{
      //   &:hover{
      //     background-color: #f89900;
      //     opacity: 0.1;
      //   }

      // }
    }
  }
.select::-webkit-scrollbar{
        width: 6px;
        height: 6px;
}
.select::-webkit-scrollbar-thumb{
       border-radius: 2px;
       background:#c7c7c7;
}
.select::-webkit-scrollbar-track{
       border-radius: 2px;
       background: #flflfl;
}
  .header {
    width: 100%;
    height: 100px;
    background-color: #fff;
    font-size: 12px;
    color: #B4B4B4;
    cursor: pointer;

    .gzhaocode {
      width: 80px;
      height: 102px;
      position: absolute;
      right: 0;
      top: 30px;
      display: none;

      .code {
        width: 80px;
        height: 120px;
        padding: 12px 5px 5px 5px;
        background: #fff;
        box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
        text-align: center;
      }

      img {
        width: 70px;
        height: 70px;
      }

      span {
        display: inline-block;
        font-size: 9px;
        color: #666666;
      }
    }

    .headerCon {
      height: 100%;
      // position: relative;
      width: 1200px;
      margin: 0 auto;

      a {
        color: #B4B4B4;

        &:hover {
          color: #fff;
        }
      }

      .iconfont {
        margin-right: 5px;
      }

      .user {
        .item {
          margin-right: 8px;
          position: relative;
          padding-left: 8px;
          color: #B4B4B4;

          &:hover {
            color: #f89900;
          }

          &~.item:before {
            position: absolute;
            content: ' ';
            width: 1px;
            height: 14px;
            background-color: rgba(255, 255, 255, 0.11);
            left: 0;
            top: 50%;
            margin-top: -7px;
          }

          &.mobile-store {
            position: relative;

            &:hover {
              .gzhaocode {
                display: inline;
              }
            }
          }

          .pictrue {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-right: 8px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .king {
            width: 13px;
            height: 12px;
            display: block;
            margin-left: 6px;
            margin-top: -5px;
          }
        }

      }
    }
  }
  .search {
    width:  387px;
    height: 40px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    margin-left: 80px;
    position: relative;
    margin-right: 50px;
    .text {
      // width: 548px;
      padding-left: 24px;
      color: #C1C1C1;
      position: relative;

      input {
        width: 293px;
        height: 38px;
        border: none;
        outline: none;
        padding-left: 10px;
      }

      .iconfont {
        font-size: 15px;
        margin-right: 5px;
        position: absolute;
        left: 14px;
        top: 12px;
      }
    }

    .bnt {
      width: 63px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: #fff;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      background-color: #f89900;
      margin-top: 3px;
    }

    .search-hot {
      width: 560px;
      height: 23px;
      overflow: hidden;
      position: absolute;
      bottom: -35px;
      left: 0;

      span {
        display: inline-block;
        padding: 0 10px;
        color: #999999;

        &:hover {
          color: #E93323;
        }
      }
    }
  }
  .nav {
    width: 100%;
    // height: 140px;
    background: #FFFFFF;

    .cartNum {
      width: 118px;
      height: 40px;
      border: 1px solid #DDDDDD;
      text-align: center;
      line-height: 40px;
      color: #E93323;
      cursor: pointer;

      &.on {
        color: #E93323;

        &:hover {
          opacity: 1;
        }
      }

      .iconfont {
        margin-right: 7px;
      }
    }

    .navCon {
      height: 140px;
      padding-bottom: 30px;

      .textPic {
        height: 100%;

        .icon {
          cursor: pointer;
          width: 112px;
          height: 40px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }


    }
  }
</style>
